<template>
    <div :class="{'ly-is-full':isFull}">
        <div class="tableSelect" ref="tableSelect">
            <el-form :inline="true" :model="formInline" label-position="left">
                <el-form-item label="地区：">
                    <el-input v-model.trim="formInline.region_name" maxlength="60"  clearable placeholder="地区名称" @change="search" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="权限选择：">
                    <el-select v-model="formInline.group_name" placeholder="请选择权限" clearable style="width: 120px" @change="search">
                        <el-option
                                v-for="item in GroupList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称：">
                    <el-input v-model.trim="formInline.username" maxlength="60"  clearable placeholder="管理员名称" @change="search" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label=""><el-button @click="search" type="primary" icon="Search"  >查询</el-button></el-form-item>
                <el-form-item label=""><el-button @click="handleEdit('','reset')" icon="Refresh">重置</el-button></el-form-item>
                <el-form-item label=""><el-button @click="addModule" type="primary" >添加</el-button></el-form-item>
                <!-- <el-form-item label=""><el-button @click="handleDelete" type="danger" :disabled="multiple" v-show="isShowBtn('goodsType','商品分类','Delete')">删除</el-button></el-form-item> -->
            </el-form>
        </div>

        <div class="table">
            <el-table :height="tableHeight" border :data="tableData" v-loading="loadingPage" style="width: 100%" ref="tableref"
                      @selection-change="handleSelectionChange" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<!--                <el-table-column type="selection" width="55"></el-table-column>-->
                <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
                <el-table-column type="index" width="60" align="center" label="序号">
                    <template #default="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" prop="username" label="名称"></el-table-column> 
                <el-table-column min-width="100" prop="group_name" label="职位"></el-table-column>

                <el-table-column min-width="100" prop="region_name" label="负责地区"></el-table-column>
 

                <el-table-column min-width="100" prop="mobile" label="电话号码"></el-table-column>
                <el-table-column min-width="100"  label="更新时间">
                    
                    <template #default="scope">
                        <span v-text="formatDateTime(tableData[scope.$index].updatetime)"></span>
                    </template> 
                </el-table-column>

                <!-- <el-table-column min-width="60" sortable prop="sort" label="排序"></el-table-column>
                <el-table-column min-width="80" prop="default_image" label="图标">
                    <template #default="scope">
                        <el-image  :src="scope.row.default_image" style="width: 30px;height:30px" :preview-src-list="[scope.row.default_image]" v-if="scope.row.default_image"></el-image>
                    </template>
                </el-table-column> -->
<!--                <el-table-column min-width="100" label="状态" prop="status">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-tag v-if="scope.row.status" size="small">正常</el-tag>-->
<!--                        <el-tag v-else type="danger" size="small">禁用</el-tag>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <!-- <el-table-column min-width="150" prop="create_datetime" label="创建时间"></el-table-column> -->
                <el-table-column label="操作"  width="180">
                    <template #header>
                        <div style="display: flex;justify-content: space-between;align-items: center;">
                            <div>操作</div>
                            <div @click="setFull">
                                <el-tooltip content="全屏" placement="bottom">
                                    <el-icon ><full-screen /></el-icon>
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                    <template #default="scope">
<!--                        <span class="table-operate-btn" @click="handleEdit(scope.row,'detail')" v-show="isShowBtn('viptypeManage','会员卡管理','Retrieve')">详情</span>-->
                        <span class="table-operate-btn" @click="handleEdit(scope.row,'edit')" >编辑</span>
                        <span class="table-operate-btn" @click="handleEdit(scope.row,'delete')" >删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
        <add-module-goods-type ref="addModuleFlag" @refreshData="refreshData"></add-module-goods-type>
    </div>
</template>
<script>
    import Pagination from "@/components/Pagination.vue";
    import {dateFormats} from "@/utils/util";
    import {regionList,regionDel,adminGroup} from '@/api/api'
    import XEUtils from "xe-utils";
    import AddModuleGoodsType from "./components/addAdmin.vue";
    import { lyMixins } from "@/mixins/mixins"
    import dayjs from 'dayjs';
    export default {
        mixins: [lyMixins],
        components:{
            AddModuleGoodsType,
            Pagination,
        },
        name:'adminManage',
        data() {
            return {
                isFull:false,
                loadingPage:false,
                // 选项框选中数组
                ids: [],
                
                // 选项框非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                formInline:{ 
                    page: 1,
                    page: 1,
                    per_page: 10,
                },
                pageparm: {
                    page: 1,
                    per_page: 10,
                    total: 0
                },
                statusList:[
                    {id:1,name:'正常'},
                    {id:0,name:'禁用'}
                ],
                timers:[],
                tableData:[],
                selectData:[],
                GroupList:[],//管理员分组列表
            }
        },
        methods:{
            formatDateTime(time){
                return dayjs.unix(time).format('YYYY-MM-DD HH:mm');
            },
            refreshData(x){
                // 新增成功 搜索归0
                if(x) this.handleEdit('','reset')
                else this.getData() 
              
            },
            setFull(){
                this.isFull=!this.isFull
                window.dispatchEvent(new Event('resize'))
            },
            // 表格序列号
            getIndex($index) { 
                // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
                return (this.pageparm.page-1)*this.pageparm.per_page + $index +1
            },
            //多选项框被选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id);
                this.single = selection.length !== 1;
                this.multiple = !selection.length;
            },
            /** 批量删除按钮操作 */
            handleDelete(row) {
                const ids = this.ids;
                let vm = this
                vm.$confirm('是否确认删除选中的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return regionDel({id:ids}).then(res=>{
                        if(res.code == 1) {
                            vm.$message.success(res.msg)
                            vm.search()
                        } else {
                            vm.$message.warning(res.msg)
                        }
                    })
                })
            },
            changeStatus(row) {
                console.log(row,'row----')
            },
            addModule() {
                console.log(this.GroupList,'---------新增出发')
                this.$refs.addModuleFlag.addModuleFn(null,'新增',this.GroupList)
            },
            handleEdit(row,flag) {
                if(flag=='detail') {
                    this.$refs.addModuleFlag.addModuleFn(row,'详情',this.GroupList)
                }
                else if(flag=='edit') {
                    this.$refs.addModuleFlag.addModuleFn(row,'编辑',this.GroupList)
                }
                else if(flag=='delete') {
                    let vm = this
                    vm.$confirm('您确定要删除选中的数据吗？',{
                        closeOnClickModal:false
                    }).then(res=>{
                        regionDel({id:row.id}).then(res=>{
                            if(res.code == 1) {
                                vm.$message.success(res.msg)
                                vm.search()
                            } else {
                                vm.$message.warning(res.msg)
                            }
                        })
                    }).catch(()=>{

                    })
                }
                else if(flag=="reset"){
                    this.formInline = {
                        page:1,
                        per_page: 10
                    }
                    this.pageparm={
                        page: 1,
                        per_page: 10,
                        total: 0
                    }
                    this.getData()
                }
            },

            callFather(parm) {
                this.formInline.page = parm.page
                this.formInline.per_page = parm.per_page
                this.getData()
            },
            search() {
                this.formInline.page = 1
                this.formInline.per_page = 10 
                this.getData()
            },
            //获取列表
            async getData(){
                this.loadingPage = true
                 regionList(this.formInline).then(res => {
                     this.loadingPage = false
                     if(res.code ==1) {
                         this.tableData = res.data.data
                         // // 将列表数据转换为树形数据 
                         // this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
                         this.pageparm.page = res.data.current_page;
                         this.pageparm.per_page = res.data.per_page;
                         this.pageparm.total = res.data.total;
                     }
                 })
            },

            timeChange(val){
                if (val) {
                    this.formInline.beginAt=dateFormats(val[0],'yyyy-MM-dd hh:mm:ss');
                    this.formInline.endAt=dateFormats(val[1],'yyyy-MM-dd hh:mm:ss');
                } else {
                    this.formInline.beginAt = null
                    this.formInline.endAt = null
                }
                this.search()
            },
            getGroupList(){
                // 管理员分组获取
                adminGroup().then(res => { 
                     if(res.code ==1) {
                          console.log(res,'------------成功获取到管理员分组列表')
                          this.GroupList = res.data
                     }
                 })
            }
        },
        created() {
            // 获取管理员分组
            this.getGroupList()
            // 数据获取
            this.getData()

            
        },
    }
</script>



